<!-- subpkg_consult/payment/payment.vue -->
<script lang="ts" setup>
  import { getpreOrderAPI, goOrderPayAPI, orderPayAPI } from '@/api/consult'
  import { patientDetailAPI } from '@/api/patient'
  import { useConsultStore } from '@/stores/consult'
  import type { OrderPreData } from '@/type/consult'
  import type { PatientItem, PatientParams } from '@/type/patient'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const store = useConsultStore()
  const orderInfo = ref({} as OrderPreData)
  onLoad(async () => {
    const res = await getpreOrderAPI({ type: store.type, illnessType: store.illnessType })
    orderInfo.value = res
  })

  const patientInfo = ref({} as PatientItem)
  onLoad(async () => {
    const res = await patientDetailAPI(store.patientId)
    patientInfo.value = res
  })

  const payMethodRef = ref()
  const onSelectPay = async () => {
    // 1 支付流程
    // 1.1 请求预支付订单信息，让用户核对支付信息或收获地址之类
    // 1.2 请求创建订单－拉起支付方式
    const res = await orderPayAPI({
      type: store.type,
      illnessType: store.illnessType,
      patientId: store.patientId,
      depId: store.depId,
      illnessDesc: store.illnessInfo.illnessDesc,
      illnessTime: store.illnessInfo.illnessTime,
      consultFlag: store.illnessInfo.consultFlag,
      pictures: store.illnessInfo.pictures,
    })

    orderId.value = res.id
    // 生成订单ID后清空piani里面的数据
    store.clear()
    payMethodRef.value.open()
  }
  // 定义订单id变量 存储订单ID 传给子组件
  const orderId = ref('')
  const onCancelPay = async () => {
    const { confirm } = await uni.showModal({
      title: '关闭支付',
      content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
      cancelText: '仍要关闭',
      cancelColor: '#848484',
      confirmText: '继续支付',
      confirmColor: '#16C2A3',
    })
    if (!confirm) {
      uni.reLaunch({ url: '/pages/index/index' })
    }
  }

  const onPay = async (activeIndex: number) => {
    if (activeIndex === 0) {
      uni.showToast({
        title: '微信支付暂不支持',
        icon: 'none',
      })
      return
    }
    // 封装API,  调用后端支付接口 - 支付参数 h5 支付地址
    const res = await goOrderPayAPI({
      orderId: orderId.value,
      paymentMethod: activeIndex + '',
      payCallback: 'http://localhost:5173/#/subpkg_consult/room/room', // 网页版支付宝 支付成功后回跳地址
      // payCallback: 'https://www.baidu.com',
    })
    console.log('res  ----->  ', res.payUrl)
    // 控制网页跳转到支付地址
    window.location.href = res.payUrl
  }
</script>

<template>
  <scroll-page>
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${orderInfo.payment}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥${orderInfo.couponDeduction}`" />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ orderInfo.pointDeduction }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ orderInfo.actualPayment }}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientInfo.name }} | {{ patientInfo.genderValue }} | {{ patientInfo.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="`${store.illnessInfo.illnessDesc}`" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ orderInfo.actualPayment }}</text>
      </view>
      <button class="uni-button" @click="onSelectPay">立即支付</button>
    </view>
  </scroll-page>
  <custom-payment
    show
    :amcount="orderInfo.actualPayment"
    ref="payMethodRef"
    @on-cancel="onCancelPay"
    @on-confim="onPay"
  ></custom-payment>
</template>

<style lang="scss">
  @import './payment.scss';
</style>
